<template>
  <flex class="comTabBar" justify="space-between">
    <flex 
      class="tab-item"
      :class="{
        'tab-item-select': data.label == label
      }"
      direction="column"
      v-for="(data, key) in tabList" :key="key"
      @click.native="goPage(data)"
    >
      <i class="iconfont" :class="data.icon"></i>
      <view class="label">{{ getLanguageText(data.label, AppSetting.language) }}</view>
    </flex>
  </flex>
</template>
<script>
import Flex from '../flex/flex.vue'
import {  getAppSetting } from '../../utils/appStorage'
import {  getLanguageText } from '../../utils/language'

export default {
  name: "ComTabBar",
  props: {
    label: {
      type: String,
      default: ''
    }
  },
  components: {Flex},
  computed: {},
  data() {
    return {
      AppSetting: {},
      tabList: [
        {
          label: "下单",
          icon: 'icon-bianji',
          path: '/pages/index/index'
        },
        {
          label: "列表",
          icon: 'icon-liebiao',
          path: '/pages/orderList/orderList'
        },
        {
          label: "已售",
          icon: 'icon-youhuiquan',
          path: '/pages/sold/sold'
        },
        {
          label: "统计",
          icon: 'icon-caiwuzhongxin',
          path: '/pages/statistics/statistics'
        },
        {
          label: "设置",
          icon: 'icon-shezhi',
          path: '/pages/setting/setting'
        }
      ]
    };
  },
  created() {},
  mounted() {
    getAppSetting(data => {
      this.AppSetting = data
      console.log('this.AppSetting', data)
    })
  },
  methods: {
    getLanguageText,
    goPage(data) {
      if (data.path) {
        console.log('data---', data.path)
        uni.redirectTo({ url: data.path })
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.comTabBar {
  border-radius: 0.8rem 0.8rem 0 0;
  // border-top: 1px solid #dedede;
  box-shadow: rgba(176, 176, 176, 0.35) 0rem 0.1rem 0.5rem;
  position: fixed;
  bottom: 0;
  padding: 0.3rem 1.5rem 0.25rem;
  width: calc(100% - 3rem);
  color: #525252;
  background: #fff;
  .tab-item {
    .iconfont {
      margin: 0.1rem 0;
      font-size: 1.2rem;
    }
    .label {
      font-size: 0.6rem;
    }
  }
  .tab-item-select {
    color: #409EFF;
    .iconfont {
      color: #409EFF;
    }
  }
}
</style>
